<template>
  <div>

    <el-row class="demo-autocomplete">
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="topic_title"
            placeholder="请输文章标题"
            @keydown.enter.native="searchTopic(pageNum,topic_title,topic_uid)"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchTopic(pageNum,topic_title,topic_uid)"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="topic_uid"
            placeholder="请输入作者id"
            @keydown.enter.native="searchTopic(pageNum,topic_title,topic_uid)"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchTopic(pageNum,topic_title,topic_uid)"></el-button>
        </el-input>
      </el-col>
      <el-col :span="1" :offset="9">
        <el-button type="primary" @click="createDialogVisible=!createDialogVisible"
                   style="font-size: 20px;font-weight: 800">文章投稿<i class="el-icon-upload el-icon--right"></i>
        </el-button>
      </el-col>
    </el-row>

    <el-table
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        highlight-current-row
        :data="items"
        style="width: 100%"
        height="580">
      <el-table-column
          fixed
          show-overflow-tooltip
          label="文章标题"
          width="150">
        <template slot-scope="scope">
          <i class="el-icon-document"></i>
          <span style="margin-left: 10px">{{ scope.row.topic_title }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="文章编号"
          width="80">
        <template slot-scope="scope">
          <i class="el-icon-paperclip"></i>
          <span style="margin-left: 10px">{{ scope.row.topic_tid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="作者"
          width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px"><el-tag size="medium">{{ scope.row.topic_uid }}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="上传时间"
          width="190">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.topic_timestamp }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="正文预览"
          show-overflow-tooltip
          width="300">
        <template slot-scope="scope">
          <i class="el-icon-full-screen"></i>
          <span style="margin-left: 10px">{{ scope.row.topic_maintext }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="点赞数"
          width="120">
        <template slot-scope="scope">
          <i class="el-icon-thumb"></i>
          <span style="margin-left: 10px">{{ scope.row.topic_like }}</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="updateDialogOpen(
                  scope.row.topic_tid,
                  scope.row.topic_title,
                  scope.row.topic_maintext,
              )">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteTopic(scope.row.topic_tid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>


    <!--修改页面-->
    <el-dialog
        title="文章修改"
        :visible.sync="updateDialogVisible"
        width="50%"
        center>
      <el-row>
        <el-col :span="16" :offset='4'>
          <el-form status-icon ref="form" :model="form" label-width="80px" :rules="rules" hide-required-asterisk>
            <el-form-item label="文章标题" prop="topic_title">
              <el-input v-model="form.topic_title"></el-input>
            </el-form-item>
            <el-form-item label="作者" v-if="false">
              <el-input v-model="form.topic_uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="topic_maintext">
              <el-input type="textarea"   :rows="15" v-model="form.topic_maintext"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="updateTopic">确 定</el-button>
       </span>
    </el-dialog>

    <!--投稿页面-->
    <el-dialog
        title="文章投稿"
        :visible.sync="createDialogVisible"
        width="50%"
        center>
      <el-row>
        <el-col :span="16" :offset='4'>
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="文章标题" prop="topic_title">
              <el-input v-model="form.topic_title"></el-input>
            </el-form-item>
            <el-form-item label="作者" v-if="false">
              <el-input v-model="form.topic_uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="topic_maintext">
              <el-input type="textarea"   :rows="15" v-model="form.topic_maintext"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="creatTopic">确 定</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "TopicTab",


  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,

      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      topic_title: '',
      topic_uid: "",


      // 弹窗
      createDialogVisible: false,
      updateDialogVisible: false,


      form: {
        topic_tid: '',
        topic_title: '',
        topic_uid: this.$root.sessionId,
        topic_maintext: '',
      },

      items: [],

      rules: {
        topic_title: [
          {required: true, message: '请输入文章标题', trigger: 'blur'},
          {
            pattern: /^((?!fuck|sb|nb|傻).)*$/,    //正则校验不用字符串
            message: "包含敏感词", trigger: "blur"
          }
        ],
        topic_maintext: [
          {required: true, message: '请输入文章正文', trigger: 'blur'},
        ]
      },

    };
  },


  methods: {
    searchTopic: function (pageNum,topic_title,topic_uid) {
      var that = this;


      this.$http.get("http://" + that.ip + ":" + that.port + "/topic/main?pageNum=" + pageNum + "&topic_title=" + topic_title + "&topic_uid=" + topic_uid)
          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
          });

    },

    deleteTopic: function (id) {
      var that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http.get("http://"+that.ip+":"+that.port+"/topic/delete/" + id)
            .then(function (response) {
              console.log(response)
              that.searchTopic(that.pageNum,that.topic_title,that.topic_uid);
            }).catch(function (err) {
          console.log(err)
        });

        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchTopic(val, this.topic_title, this.topic_uid);
    },


    creatTopic() {
      var that = this;
      if (this.form.topic_title == '' ||  this.form.topic_maintext ==''||!this.isSensitiveWord(this.form.topic_title)) {
        that.$message.error(
            '投稿失败,请检查后再次提交');
      } else {
        this.$http.post("http://" + that.ip + ":" + that.port + "/topic/create", that.form)
            .then(function (response) {
              console.log(response);
              that.$message({
                message: "投稿成功",
                type: 'success'
              });
              that.searchTopic(that.pageNum, that.topic_title, that.topic_uid);
              that.createDialogVisible = false;
              that.form.topic_title = '';
              that.form.topic_maintext = '';
            }).catch(function (err) {
          console.log(err);
          that.$message.error(
              '投稿失败');
        });
      }
    },

    updateDialogOpen(topic_tid, topic_title, topic_maintext) {
      this.form.topic_tid = topic_tid;
      this.form.topic_title = topic_title;
      this.form.topic_maintext = topic_maintext;
      this.updateDialogVisible = true;

    },

    cancelBtn() {
      this.updateDialogVisible = false;
      this.createDialogVisible = false;
      this.form.topic_title = '';
      this.form.topic_maintext = '';
    },

    updateTopic() {
      var that = this;
      if (this.form.topic_title == '' || this.form.topic_maintext ==''||!this.isSensitiveWord(this.form.topic_title)) {
        that.$message.error(
            '投稿失败,请检查后再次提交');
      } else {
        this.$http.post("http://" + that.ip + ":" + that.port + "/topic/doEdit", that.form)
            .then(function (response) {
              console.log(response);
              that.$message({
                message: "投稿成功",
                type: 'success'
              });
              that.searchTopic(that.pageNum, that.topic_title, that.topic_uid);
              that.createDialogVisible = false;
              that.form.topic_tid = '';
              that.form.topic_title = '';
              that.form.topic_maintext = '';
            }).catch(function (err) {
          console.log(err);
          that.$message.error(
              '投稿失败');
        });
      }
    },


//敏感词验证
    isSensitiveWord(str) {
      const reg_str = /^((?!fuck|sb|nb|傻).)*$/;
      return reg_str.test(str);
    },

  },
  created() {
    this.searchTopic(1,'','');
  },
}
</script>

<style scoped>

</style>